<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-11-22 13:22:38
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:36:43
-->
<template>
  <div class="app-container">
    <div>
      <el-button
        type="primary"
        size="default"
        @click="newAdd"
        style="margin-top: 10px"
      >
        新增地址
      </el-button>
    </div>
    <el-table :data="addressData">
      <el-table-column label="收件人" prop="addressee"> </el-table-column>
      <el-table-column label="手机号码" prop="phone"> </el-table-column>
      <el-table-column label="详细地址" prop="address"> </el-table-column>
      <el-table-column label="是否默认">
        <template slot-scope="scope">
          <div v-if="scope.row.isDefault" class="defaultImg">
            <img src="../../../../assets/images/default.jpg" alt="" />
          </div>
          <div v-else class="defaultImg">
            <img src="../../../../assets/images/nodefault.jpg" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" class="setting">
        <template slot-scope="scope">
          <span @click="edit(scope.row)">编辑</span>
          <span @click="del(scope.row)">删除</span>
          <span @click="def(scope.row)">设为默认</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      background
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      layout=" ->,total, sizes, prev, pager, next, jumper "
      :total="total"
    >
    </el-pagination>
    <el-dialog
      title="新增地址"
      :visible.sync="addressShow"
      width="30%"
      @close="addressClose"
    >
      <el-form
        :model="addressForm"
        ref="addressForm"
        :rules="addressRules"
        label-position="top"
      >
        <el-form-item label="收件人" prop="addressee">
          <el-input
            v-model="addressForm.addressee"
            placeholder="请输入收件人"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input
            v-model="addressForm.phone"
            placeholder="请输入手机号"
            size="normal"
          ></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input
            v-model="addressForm.address"
            placeholder="请填写详细收件地址,例如街道名称、门牌号码、楼层
等信息"
            clearable
            type="textarea"
            :rows="4"
          ></el-input>
        </el-form-item>
        <el-form-item label="默认地址">
          <el-checkbox v-model="addressForm.isDefault">默认</el-checkbox>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="addressShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit" v-if="addressForm.id == ''">
          保存
        </el-button>
        <el-button type="primary" @click="editSubmit" v-else>保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  invoiceAddressList,
  insertInvoiceAddress,
  deleteInvoiceAddress,
  updateInvoiceAddress,
  setDefault,
} from "@/api/invoiceAst";
export default {
  data() {
    return {
      addressData: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      addressShow: false,
      addressForm: {
        id: "",
        addressee: "",
        phone: "",
        address: "",
        isDefault: false,
      },
      addressRules: {
        addressee: [
          {
            required: true,
            message: "请输入收件人",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 关闭
    addressClose() {
      this.addressForm = {
        id: "",
        addressee: "",
        phone: "",
        address: "",
        isDefault: false,
      };
    },
    // 更新地址
    editSubmit() {
      this.$refs.addressForm.validate((valid) => {
        if (!valid) return;
        updateInvoiceAddress(this.addressForm).then((res) => {
          this.$message.success(res.msg);
          this.addressShow = false;
          this.getList();
        });
      });
    },
    //   保存地址
    onSubmit() {
      this.$refs.addressForm.validate((valid) => {
        if (!valid) return;
        insertInvoiceAddress(this.addressForm).then((res) => {
          this.$message.success(res.msg);
          this.addressShow = false;
          this.getList();
        });
      });
    },
    //   获取列表
    getList() {
      invoiceAddressList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.addressData = res.rows;
        this.total = res.total;
      });
    },
    //   新增地址
    newAdd() {
      if (this.addressData.length >= 3) {
        return this.$message.info("只能添加三条地址");
      } else {
        this.addressShow = true;
      }
    },
    // 修改
    edit(row) {
      this.addressForm = row;
      this.addressShow = true;
    },
    // 删除
    async del(row) {
      let ids = [];
      ids.push(row.id);
      const confirmResult = await this.$confirm(
        "该操作将删除该地址，你确认删除吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        deleteInvoiceAddress(ids).then((res) => {
          this.$message.success(res.msg);
          this.getList();
        });
      }
    },
    // 设为默认
    def(row) {
      setDefault({
        id: row.id,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getList();
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.cell {
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1259fa;
    margin-right: 10px;
    cursor: pointer;
  }
}
.defaultImg {
  width: 20px;
  height: 20px;
  margin: auto;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>